<template>

  <div style="width: 99%">
    <div >
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>系统管理</el-breadcrumb-item>
        <el-breadcrumb-item>组织架构</el-breadcrumb-item>
      </el-breadcrumb>
    </div>


    <div style="margin-top: 3px;">
      <el-container>
        <el-aside width="200px" style="margin-top: 20px">
          <el-input
            placeholder="输入关键字进行过滤"
            v-model="formObj.name"
            @keyup.enter.native="_getDeptList"
          >
          </el-input>
          <el-tree
            class="filter-tree"
            :data="deptList"
            :props="defaultProps"
            default-expand-all
            :filter-node-method="filterNode"
            ref="tree2">
          </el-tree>
        </el-aside>
        <el-main>
          <div style="float: left;">
            <el-button type="primary" @click="_add">添加</el-button>
          </div>
          <el-table
            :data="getPage"
            border
            height="500"
            style="width: 100%">
            <el-table-column v-for="item in columnName" :key="item.id" :label="item.label" >
              <template slot-scope="scope">
                <span>{{scope.row[item.prop]}}</span>
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="100">
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                <el-button type="text" @click="_edit(scope.row)"  size="small">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 20, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>

        </el-main>
      </el-container>





    </div>
    <SysDeptEdit ref="sysDeptEditRef"  @on-result-change="_callBack"></SysDeptEdit>
  </div>

</template>

<script>
  import  SysDeptEdit from './SysDeptEdit'
  export default {
    components:{
      SysDeptEdit
    },
    mounted(){
      this._page();
      this._getDeptList();
    },
    name: "Home",
    data(){
      return {

        currentPage:1, //初始页
        pageSize:10,    //    每页的数据
        total:0,    //    每页的数据
        getPage:[],
        formObj:{
          name:undefined
        },
        columnName:[
          {prop:"name",label:"名称",width:"120",fixed:true},
          {prop:"pname",label:"上级组织",width:"120",fixed:true},
          {prop:"remark",label:"备注",width:"120"},
        ],

        defaultProps: {
          children: 'children',
          label: 'label'
        },
        filterText: '',
        deptList: [],
      }
    },
    methods:{
      handleClick(data){
        console.log(data);
      },
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },

      handleSizeChange(val) {
        this.pageSize=val;
        this._page();
      },
      handleCurrentChange(val) {
        this.currentPage=val;
        this._page();
      },

      _callBack(){
        this._page();
        this._getDeptList();
      },
      _add(){
        this.$refs.sysDeptEditRef._open();
      },

      _edit(row){
        console.log(row);
        this.$refs.sysDeptEditRef._open(row);
      },

      _page(){
        this.$http.post('/api/base/sys_dept/page_vo',{'pageNum':this.currentPage,'pageSize':this.pageSize}).then(res=>{
          let data= res.data.data;
          this.getPage=data.records;
          console.log('----------------data',data)
          console.log('-----------------',data.total)
          this.total=data.total;
        }).catch(err=>{
          console.log(err)
        });
      },

      _getDeptList(){
        const loading = this.$loading({
          lock: true,
          text: '拼命加载中...',
          spinner: 'el-icon-loading',
          target: this.$el
        });
        this.$http.post('/api/base/sys_dept/get_dept_dto_list',this.formObj).then(res=>{
          let data= res.data.data;
          this.deptList=data;
          console.log('----------------data',data);
          loading.close();
        }).catch(err=>{
          console.log(err);
          loading.close();
        });
      },


    },
  }
</script>

<style scoped>

</style>
